<template>
  <!-- LIVE -->
  <div class="live-container">
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <van-empty v-if="liveList.length == 0" class="custom-image" :image="require('@/assets/head/none.jpg')" />
        <!-- 活动列表 -->
        <div class="exhibition-list" v-else>
          <feeds-item
            v-for="(ex, index) in liveList"
            :key="index"
            :pic_url="ex.covers[0].url"
            :name="ex.addresses && ex.addresses[0].name"
            :title="ex.title"
            :time="ex.addresses && ex.time"
            :price_desc="ex.price_desc"
            :card_price="ex.go_card_discounted_price"
            :plus_price="ex.go_card_discounted_price"
            :view_count="ex.view_count"
            :reason_text="ex.reason_text"
            :post_covers="ex.post_covers"
            :feed_id="ex.id"
          ></feeds-item>
        </div>
      </template>
    </refresh-list>
  </div>
</template>

<script>
import RefreshList from '@/components/activity/public-component/RefreshList'
import FeedsItem from '../public-component/FeedsItem.vue'
import axios from '@/utils/request'
import { mapState } from 'vuex'
export default {
  components: {
    RefreshList,
    FeedsItem
  },
  props: {
    reset: Boolean
  },
  watch: {
    reset() {
      this.offset = 0
      this.liveList = []
      this.sendRequest()
    }
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      limit: 10,
      offset: 0,
      liveList: [] // 话剧演出数据列表
    }
  },
  computed: {
    ...mapState(['time', 'sort_by'])
  },
  methods: {
    // 请求数据
    async requestLiveData() {
      /*
      请求地址:https://api.xmonster.cn/v2/categories/nlive/feeds
      请求方式:get
      请求参数:
      params:{
        limit：10    每次请求数据数量
        offset：10       偏移量，每次增加limit的数量
        sort_by：default（智能排序） distance（离我最近） price（价格最低） new（最新上线）
        time：in_one_week（一周内） in_one_month（一月内） on_weekends（周末） near_the_end（即将结束）
      }
      */
      const data = await axios.get('/v2/categories/nlive/feeds', {
        params: {
          limit: this.limit,
          offset: this.offset,
          sort_by: this.sort_by,
          time: this.time
        }
      })
      if (data.length > 0) {
        this.liveList = [...this.liveList, ...data]
        this.status.loading = false
        this.status.finished = false
        this.offset += 10
      } else {
        this.status.finished = true
      }
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      await this.requestLiveData()
      Toast.clear()
    },
    // 下拉刷新
    async onRefresh() {
      this.offset = 0
      this.liveList = []
      await this.requestLiveData()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestLiveData()
      this.status.loading = false
    }
  },
  created() {
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.live-container {
  padding: 12px 10px 50px;
}
</style>
